<template>

<el-drawer v-model="detailsVisible" title="流水线信息" size="100%">
    <div>
        <el-descriptions
        :column="3"
        >
            <el-descriptions-item label="服务名称"><el-tag size="small">{{ pipelineInfo.serviceName }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="代码地址"><el-link type="primary">{{ pipelineInfo.gitUrl }}</el-link></el-descriptions-item>
            <el-descriptions-item label="版本"><el-tag size="small">{{ pipelineInfo.branch }}</el-tag></el-descriptions-item>
        </el-descriptions>
    </div>

    <el-table :data="state.dataList" style="width: 100%" :row-key="getRowKey" :expand-row-keys="expandRows"  >
        <el-table-column type="expand">
            <template #default="props">
                <div class="module_border">
                    <div class="card">
                        <el-card  v-for="pipelineTask in props.row.taskItemList" :key="pipelineTask" shadow="hover" class="card-item"> 
                            <div class="card-item-content">
                                <el-progress type="circle" :percentage="pipelineTask.percent" :width="40" :stroke-width="2" />
                                <el-button link disabled>{{ pipelineTask.moduleName}}</el-button>
                            </div>
                            <el-divider />
                            <div class="card-item-content">
                                <el-button link size="small" type="primary">日志</el-button> 
                            </div>
                        </el-card>    
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="任务id" prop="id"></el-table-column>
        
        <el-table-column label="操作人" prop="oprName" />
        <el-table-column label="操作时间">
            <template #default="props">
            {{dayjs(props.row.createTime).format('YYYY-MM-DD HH:mm:ss')  }}
            </template>
        </el-table-column>

        <el-table-column  label="状态" header-align="center" align="center">
			<template #default="scope">
				<div @mouseover="mouseover(scope.row)" @mouseout="mouseout(scope.row)" @click="cancelTask(scope.row)" style="cursor: pointer;">
					<el-button 
						style="width:100px ;"
						:type=getLodingType(scope.row) 
						:icon=getLodingImg(scope.row)
						:loading=getLoading(scope.row)
						>{{getLodingText(scope.row)}}
					</el-button>
				</div>
			</template>
		</el-table-column>
    </el-table>    

    <el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
	</el-pagination>
</el-drawer>


</template>

<script setup lang="ts">
    import { reactive, ref ,onMounted} from 'vue'
    import { getRequest,postReq} from '@/utils/request'
    import uri from '@/api/uri'
    import dayjs from 'dayjs'
    import { PagerOptions } from '@/hooks/pager'
    import { useCrud } from '@/hooks'
    import { ElMessage} from 'element-plus/es'
    import { Eleme,CircleCloseFilled,SuccessFilled } from '@element-plus/icons-vue'

    const detailsVisible = ref(false)
    const pipelineInfo = ref();
    const loading = ref(false)
    const expandRows = ref<any>([])

    const getRowKey = (row:any) =>{
        return row.id
    }

    const state: PagerOptions = reactive({
        dataListUrl: uri.getPipelineTask,
        deleteIsNeed:false,
        queryForm: {
            pipelineId: ''
        }
    })

    const init = (pipeline:any) => {
        detailsVisible.value = true
        pipelineInfo.value = pipeline 
        state.queryForm.pipelineId = pipelineInfo.value.id
        getDataList()
    }
    
    const mouseover = (row: any) =>{
        if(!row){
            return 
        }
        row.mouseHover = true
    }

    const mouseout = (row: any) =>{
        if(!row){
            return 
        }
        row.mouseHover = false
    }
    //取消任务
    const cancelTask = (row:any) => {
       
        if(row.status != 1 || row.status != 0) return
        loading.value = true
        getRequest(uri.stopPipelineTask,{"taskId":row.id}).then(res =>{
            ElMessage.success({
                message: '操作成功',
                duration: 500,
		    })
            loading.value = true
            getDataList()
        })


    }

    //按钮文本
    const getLodingText =(row: any) =>{
        
        if(!row || !row.pipelineTaskStatus){
            return "无任务"
        }

        if((row.status == 0 || row.status == 1)  && row.mouseHover){
            return "终止"
        }

        return row.pipelineTaskStatus
    }

    //按钮类型
    const getLodingType =(row: any) =>{
        
        if(!row){
            return "primary"
        }

        if(row.status == 0 || row.status == 1){
            if(row.mouseHover){
                return "danger"
            }
            return "primary"
        }

        if(row.status == 2){
            return "success"
        }

        if(row.status == 3 || row.status == 4 || row.status == 5 ){
            return "danger"
        }
        return "primary"
    }

    //按钮图标
    const getLodingImg =(row: any) =>{
        
        if(!row){
            return Eleme
        }

        if(row.status  == 0 || row.status  == 1){
        
            if(row.mouseHover){
                return CircleCloseFilled
            }

            return Eleme
        }

        if(row.status  == 2){
            return SuccessFilled
        }

        if(row.status  == 3 || row.status == 4 || row.status == 5){
            return CircleCloseFilled
        }

        return Eleme
    }

    //是否加载中
    const getLoading =(row:any) =>{
        if(!row){
            return false
        }
        if(row.status  == 1){
            return true
        }
        return false
    }

    const updateTaskStatus = (stat:any) => {
        if(!detailsVisible.value) return
        if(!stat || Object.keys(stat).length === 0){
            console.info("不需要更新状态")
            return
        }
        
        state.dataList?.forEach(item =>{
			if(stat[item.id]){
                item.pipelineTaskStatus = stat[item.id].pipelineTaskStatus
                item.status = stat[item.id].status
                const taskItemMap = stat[item.id].taskItemCountMap
                item.taskItemList.forEach((taskItem:any) => {
                    if(taskItemMap[taskItem.id].percent){
                        taskItem.percent = taskItemMap[taskItem.id].percent
                    }
                })
			}
		})
    }

    const needUpdateTaskIdList = ref<any>([])

    const getNeedUpdateTask =() =>{
        needUpdateTaskIdList.value = []
        if(!detailsVisible.value) return needUpdateTaskIdList.value;
        
        state.dataList?.forEach(item => {
            if(item.status == 0  || item.status == 1){
                needUpdateTaskIdList.value.push(item.id)
            }
        })
        return needUpdateTaskIdList.value
    }

    defineExpose({
	    init,updateTaskStatus,getNeedUpdateTask
    })

    const { getDataList, sizeChangeHandle, currentChangeHandle} = useCrud(state)
   
</script>

<style scoped>
.module_border {
  height: 160px;
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
}

.card{
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.card-item{
    height: 140px;
    width: 250px;
}

.card-item-content{
    display: flex;
    flex-wrap: wrap;
     justify-content:space-between;
}

.user-info{
    display: flex;
    justify-content: flex-end;
}

.cell-item {
  display: flex;
  align-items: center;
  margin-right: 10px;

}

</style>